<template>
  <ry-modal :title="`${title}留言`" v-model="visible" destroyOnClose :maskClosable="false"
    :confirmLoading="confirmLoading" @ok="handleOk">
    <a-spin :spinning="confirmLoading">
      <a-form-model :model="form" :rules="rules" v-bind="modelConfig">
        <a-row :gutter="[24,0]">
          <a-col :span="24" style="font-weight: 600;margin-bottom: 10px;margin-left: 20px">
            <span style="background-color:#3acaca;margin-right: 4px">&nbsp</span>客户信息
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="客户名称" prop="cardName">
              <span>{{form.businessAccount.nickname}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="客户手机号" prop="cardName">
              <span>{{form.businessAccount.phone}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="客户出生年月日" prop="cardName">
              <span>{{form.businessAccount.birth}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="客户年龄" prop="cardName">
              <span>{{moment().diff(moment(form.businessAccount.birth), 'years') + '岁'}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" style="font-weight: 600;margin-bottom: 10px;margin-left: 20px">
            <span style="background-color:#3acaca;margin-right: 4px">&nbsp</span>留言信息
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="客户留言问题" prop="question" :labelCol="{ span: 3 }" :wrapperCol="{ span: 12 }">
              <span>{{form.question}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="留言回答" prop="answer" :labelCol="{ span: 3 }" :wrapperCol="{ span: 12 }">
              <a-textarea :maxLength="300" :suffix="'字'" v-model="form.answer" placeholder="限制300字" allow-clear :rows="4" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </ry-modal>
</template>

<script>
import { CommonModal } from '@/ryweb'
import moment from 'moment'
export default {
  name: '',
  mixins: [CommonModal],
  props: ['url'],
  data () {
    return {
      count: 0,
      form: {
        businessAccount: {}
      },
      projects: [],
      modelConfig: {
        ref: 'ruleForm',
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      },
      columns: [
        {
          title: '项目名称',
          dataIndex: 'projectName',
          width: '30%',
          scopedSlots: { customRender: 'projectName' },
        },
        {
          title: '单价',
          dataIndex: 'projectPrice',
          width: '30%',
          scopedSlots: { customRender: 'projectPrice' },
        },
        {
          title: '数量',
          dataIndex: 'quantity',
          width: '30%',
          scopedSlots: { customRender: 'quantity' },
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
      rules: {
        answer: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }]
      }
    }
  },
  created () {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    edit (record) {
      this.title = '修改'
      this.form = {...record}
      this.type = '2'
      this.visible = true
    },
    handleOk () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let params = { ...this.form }
          this.$post(this.url.edit, params).then(res => {
            if (res.code === 200) {
              this.$message.success('成功')
              this.visible = false
              this.$emit('ok')
            } else {
              this.$message.error('请求失败')
            }
          })
        } else {
          return false
        }
      })
    }
  },
  mounted () {
  }
}
</script>

<style scoped>
.ry-modal .body-container .ant-form-item {
  margin-bottom: 0.15rem;
}
.editable-add-btn {
  margin-bottom: 8px;
}
</style>
